<template>
	<div class="page">
		<Head />
		<div class="j-tabs-bar">
			<el-menu :default-active="$route.path" :router="true" class="j-tabs" mode="horizontal">
				<el-menu-item :class="{activem:$route.name=='dc-page'}" index="/dc-page"><span>添加任务</span></el-menu-item>
				<el-menu-item index="/dc-page-zing"><span>正常优化中</span></el-menu-item>
				<el-menu-item index="/0"><span>无索引优化中</span></el-menu-item>
				<el-menu-item index="/1"><span>未审核的任务</span></el-menu-item>
				<el-menu-item index="/2"><span>审核不通过的任务</span></el-menu-item>
				<el-menu-item index="/3"><span>停止优化的任务</span></el-menu-item>
				<el-menu-item index="/4"><span>报错申请的任务</span></el-menu-item>
				<el-menu-item index="/5"><span>申请删除的任务</span></el-menu-item>
				<el-menu-item index="/6"><span>未审核的任务</span></el-menu-item>
			</el-menu>
		</div>
		<div class="page-main">
			<div class="j-panel">
				<div class="j-panel-head flex-between">
					<div class="j-tit">分组管理</div>
					<div class="j-icons">
						<el-button type="blue" icon="iconfont icon-jia" circle></el-button>
					</div>
				</div>
				<div class="j-panel-body">
					<!-- bar -->
					<div class="ac-bar">
						<div class="radio-ac-bar">
							<div class="l-file">
								<i class="iconfont icon-wenjian"></i>
							</div>
							<el-radio-group v-model="radioV">
								<el-radio :label="1">10</el-radio>
								<el-radio :label="2">25</el-radio>
								<el-radio :label="3">50</el-radio>
								<el-radio :label="4">100</el-radio>
							</el-radio-group>
							<div class="ac-arrow">
								<i class="iconfont icon-left"></i>
							</div>
						</div>
						<div class="ac-search">
							<el-input size="small" v-model="input" placeholder="请输入搜索关键字"></el-input>
							<el-button size="small"><i class="iconfont icon-sou"></i></el-button>
						</div>
					</div>
					<!-- 表格 -->
					<el-row :gutter="20">
						<el-col :span="12">
							<div class="grid-content bg-purple">
								<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
									<el-table-column prop="num" width="80">
										<template slot-scope="scope">
											<div class="num-box">{{ scope.row.num }}</div>
										</template>
									</el-table-column>
									<el-table-column property="number" width="200" label="序号">
									</el-table-column>
									<el-table-column property="group" width="200" label="分组名称">
									</el-table-column>
									<el-table-column property="task" width="200" label="任务数">
									</el-table-column>
									<el-table-column label="">
										<template slot-scope="scope">
											<el-button icon="iconfont icon-bianji" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
											<el-button icon="iconfont icon-shanchu" @click="handleDelete(scope.$index, scope.row)" circle></el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content bg-purple">
								<!-- 表格 -->
								<el-table ref="singleTable" :data="tableData1" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" >
									<el-table-column prop="num" width="80">
										<template slot-scope="scope">
											<div class="num-box">{{ scope.row.num }}</div>
										</template>
									</el-table-column>
									<el-table-column property="number" width="200" label="序号">
									</el-table-column>
									<el-table-column property="group" width="200" label="分组名称">
									</el-table-column>
									<el-table-column property="task" width="200" label="任务数">
									</el-table-column>
									<el-table-column label="">
										<template slot-scope="scope">
											<el-button icon="iconfont icon-bianji" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
											<el-button icon="iconfont icon-shanchu" @click="handleDelete(scope.$index, scope.row)" circle></el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				input: '',
				radioV: 2,
				tableData: [{
						num: '01',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '03',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '05',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '07',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '09',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
				],
				tableData1: [{
						num: '02',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '04',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '06',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '08',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
					{
						num: '10',
						number: '202101001',
						group: '分组名称一',
						task: '500',
					},
				]
			};
		},
		methods: {
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>
<style scoped="scoped">
	.cell .el-button {
		border: 1px solid #dedede;
		padding: 10px;
	}

	.cell .el-button+.el-button {
		margin-left: 38px;
	}
	
	.el-table /deep/ th.is-leaf{
		border-bottom: 0;
	}
	
	
	.el-row /deep/ .el-col-12:last-child{
		padding-left: 120px!important;
		padding-right: 0!important;
	}
	
	.el-row /deep/ .el-col-12:first-child{
		padding-left: 0px!important;
		padding-right: 100px!important;
	}
</style>
